<!--
 * @Author: ChunLai
 * @Date: 2023-09-07 11:56:21
 * @LastEditTime: 2025-09-02 18:23:08
 * @Description: 客户通讯录
 * @FilePath: \02.bldinsure\src\components\CustomerDirectory.vue
-->
<template>
  <van-popup v-model="showPop" round position="bottom">
    <div class="customer_directory_module">
      <div class="search_name_list">
        <span class="act_btn reset" @click="onReSearch">重置</span>
        <van-search
          v-model="keyWord"
          class="flex_1"
          placeholder="请输入搜索关键词"
          @blur="onSearch"
          style="padding: 0 12px"
        />
        <span class="act_btn search" @click="onSearch">搜索</span>
      </div>
      <div class="userBox">
        <div class="customer_item">
          <span class="item_span">姓名</span>
          <span class="item_span">手机号</span>
          <span class="item_span">证件号</span>
          <span class="item_span status"></span>
        </div>
        <div class="customer_lists" v-if="userData.length > 0">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="getUserList"
          >
            <div
              class="customer_2item"
              v-for="(item, index) in userData"
              :key="`user_cell${index}`"
              @click="selectUser(item)"
            >
              <span class="item_span name">{{ item.name }}</span>
              <span class="item_span phone">
                {{ item.phone | tellPhoneFormat }}
              </span>
              <span class="item_span idnum">
                {{ item.idNum | idNumFormat("s") }}
              </span>
              <span class="item_span status">
                <MsImgIcon
                  size="14"
                  name="checked"
                  v-if="target.idNum == item.idNum"
                />
              </span>
            </div>
          </van-list>
        </div>
        <van-empty image="search" description="暂未查询到相关客户" v-else />
      </div>
      <div class="sureBtns">
        <div class="cancelBtn" @click="$emit('cancel')">取消</div>
        <div class="sureBtn" @click="suerAction">确定</div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "CustomerDirectory",
  data() {
    return {
      showPop: false,
      keyWord: "",
      page: 1,
      userData: [],
      target: {},
      loading: false,
      finished: false,
    };
  },
  created() {
  },
  methods: {
    initData(keyWord = "") {
      this.keyWord = "";
      if (keyWord) {
        this.keyWord = keyWord;
      }
      this.showPop = true;
      this.onSearch();
    },
    selectUser(data) {
      this.target = data;
    },
    onReSearch() {
      this.keyWord = "";
      this.onSearch();
    },
    onSearch() {
      this.userData = [];
      this.target = {};
      if (!this.keyWord) return;
      this.getUserList();
    },
    getUserList() {
      this.$store
        .dispatch("apis/rakeThroughApi", {
          workNum: this.workNum,
          userId: this.bldUserId,
          name: this.keyWord || "",
        })
        .then((res) => {
          if (res.list && res.list.length > 0) {
            this.userData = res.list;
          }
        });
    },
    async suerAction() {
      if (!this.target.idNum) return this.$toast("请选择需要导入的客户信息");
      this.$emit("confirm", this.target);
    },
  },
};
</script>

<style lang="less">
.search_name_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .act_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 30px;
    border-radius: 4px;
    &.reset {
      color: #f54040;
      background: #fff0f0;
      border: 1px solid #f54040;
    }
    &.search {
      color: #1989fa;
      background: #e8f2fb;
      border: 1px solid #1989fa;
    }
  }
}

.userBox {
  height: 50vh;
  overflow-y: auto;
  padding: 0 10px 10px 10px;
  .customer_item {
    display: flex;
    align-items: center;
    padding-top: 5px;
    .item_span {
      flex: 1;
      color: #242424;
      font-weight: 600;
      line-height: 30px;
    }
  }
  .customer_lists {
    width: 100%;
    height: calc(50vh - 45px);
    overflow: hidden;
    overflow-y: auto;

    .customer_2item {
      display: flex;
      align-items: center;
      padding: 5px 0;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid #ededed;
        transform: scaleY(0.5);
      }
      .item_span {
        display: flex;
        align-items: center;
        height: 30px;
        &.name {
          width: 80px;
          padding-right: 5px;
        }
        &.phone {
          width: 80px;
          margin-right: 10px;
        }
        &.idnum {
          flex: 1;
        }
      }
    }
  }
}

.sureBtns {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 5px 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  .cancelBtn,
  .sureBtn {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 40px;

    &:active {
      opacity: 0.7;
    }
  }

  .cancelBtn {
    color: #242424;
    background-color: #f7f7f7;
    margin-right: 20px;
  }

  .sureBtn {
    color: #fff;
    background: #ee0a24;
  }
}
</style>
